<template>
	<div id="writeAll">
		<div id="overWrite">
			<img :src="sendImg" @click="allInput" @mouseover="changeSend" @mouseout="changeCancel"/>
			<div id="sendText" ref="sendtext">发布</div>
		</div>
		<input id="imgInput" type="file" ref="imgInput" accept=".png,.jpg,.jpeg" />
		<div v-if="picImg" id="showImg">
			<img id="showImgimg" :src="picImg" />
			<div id="imgTool">
				<div id="toolBoxleft" @click="imgInput">
					<img src="../static/photo1.png" />
				</div>
				<div id="toolBoxright" @click="imgDelete">
					<img src="../static/delete.png" />
				</div>
			</div>
		</div>
		<div v-else id="pic" @click="imgInput">
			<img src="../static/photo.png" />
			<div id="text">添加封面</div>
		</div>
		<div id="title"><input type="text" placeholder="请输入标题(最多30字体)" v-model="inputInfo.title" /></div>
		<div id="toolbar-container" class="toolbar"></div>
		<div id="text-container" class="text"></div>
	</div>
</template>

<script>
	import E from 'wangeditor'
	export default {
		data() {
			return {
				picImg: '',
				sendImg:require('../static/tijiao.png'),
				inputInfo: {
					uid: this.$storage.get('user').id,
					title: '',
					text: '',
					html: '',
					pic: ''
				}
			}
		},
		mounted() {
			const editor = new E('#toolbar-container', '#text-container') // 传入两个元素
			editor.config.onchange = () => {
				this.inputInfo.text = editor.txt.text()
				this.inputInfo.html = editor.txt.html()
			}
			// 配置菜单栏，删减菜单，调整顺序
			editor.config.menus = [
				'head',
				'bold',
				'fontSize',
				'italic',
				'underline',
				'strikeThrough',
				'indent',
				'lineHeight',
				'foreColor',
				'backColor',
				'list',
				'justify',
				'quote',
				'table',
				'splitLine',
				'undo',
				'redo',
			]
			// 取消自动 focus
			editor.config.focus = false
			editor.create()

			// 监听图片上传
			document.getElementById('imgInput').onchange = () => {
				let fs = document.getElementById('imgInput').files[0];
				let imgName = fs.name + 'aaa.' + fs.name.substring(fs.name.lastIndexOf('.') + 1).toLowerCase() // 定义图片名字
				this.inputInfo.pic = imgName
				var forms = new FormData()
				forms.append('file', fs)
				forms.append('name', imgName)
				console.log(fs)
				this.$axios({
					url: this.ip + '/upload',
					method: 'post',
					headers: {
						"Content-Type": "multipart/form-data;"
					},
					data: forms
				}).then(res => {
					console.log(res)
					this.picImg = this.ip + '/' + imgName
					document.getElementById('imgInput').value = ''
					console.log(document.getElementById('imgInput').files)
				})
			}
		},
		methods: {
			imgInput() {
				if (this.inputInfo.pic) {
					this.imgDelete()
				}
				this.$refs.imgInput.click()
			},
			imgDelete() {
				this.picImg = ''
				this.$axios({
					url: this.ip + '/deleteImg',
					method: 'post',
					data: {
						imgName: this.inputInfo.pic
					}
				}).then(res => {
					console.log(res.data.info)
					this.inputInfo.pic = ''
				})
			},
			allInput() {
				this.$axios({
					url: this.ip + '/postUpload',
					method: 'post',
					data: this.inputInfo
				}).then(res => {
					console.log(res)
					alert("发布成功")
					this.$router.push({path:'/index'})
				})
			},
			changeSend(){
				this.sendImg = require('../static/tijiao1.png')
				this.$refs.sendtext.style.top = "-35px"
				this.$refs.sendtext.style.opacity = "1"
			},
			changeCancel(){
				this.sendImg = require('../static/tijiao.png')
				this.$refs.sendtext.style.top = "5px"
				this.$refs.sendtext.style.opacity = "0"
			}
		}
	}
</script>

<style>
	#writeAll {
		width: 760px;
		margin: auto;
		margin-bottom: 16px;
	}
	#writeAll #overWrite {
		position: fixed;
		bottom: 16px;
		right: 50px;
	}
	#writeAll #overWrite img {
		width: 100px;
		height: 100px;
		cursor: pointer;
	}
	#writeAll #overWrite #sendText {
		position: absolute;
		top: 5px;
		right: 22px;
		height: 30px;
		width: 56px;
		line-height: 30px;
		background-color: rgba(0,0,0,.5);
		color: white;
		border-radius: 8px;
		text-align: center;
		user-select: none;
		opacity: 0;
		transition: all .3s;
	}
	
	#writeAll #imgInput {
		display: none;
	}

	#writeAll #showImg {
		width: 760px;
		position: relative;
		margin-top: 16px;
	}

	#writeAll #showImg #showImgimg {
		margin: auto;
		display: block;
		max-width: 760px;
		border-radius: 8px;
		box-shadow: 5px 5px 5px rgba(32, 32, 32, .3);
	}

	#writeAll #showImg #imgTool {
		position: absolute;
		right: 0;
		bottom: 0;
		display: flex;
		width: 100px;
		height: 50px;
		background-color: black;
		border-radius: 8px;
	}

	#writeAll #showImg #imgTool #toolBoxleft,
	#writeAll #showImg #imgTool #toolBoxright {
		width: 50px;
		height: 50px;
		cursor: pointer;
	}

	#writeAll #showImg #imgTool #toolBoxleft {
		border-radius: 8px 0 0 8px;
	}

	#writeAll #showImg #imgTool #toolBoxright {
		border-radius: 0 8px 8px 0;
	}

	#writeAll #showImg #imgTool #toolBoxleft:hover,
	#writeAll #showImg #imgTool #toolBoxright:hover {
		background-color: #D4D4D4;
	}

	#writeAll #showImg #imgTool #toolBoxleft img,
	#writeAll #showImg #imgTool #toolBoxright img {
		margin: 10px;
		width: 30px;
		height: 30px;
		display: block;
		box-shadow: none;
	}

	#writeAll #pic {
		width: 100%;
		height: 190px;
		position: relative;
		cursor: pointer;
	}

	#writeAll #pic img {
		position: absolute;
		width: 50px;
		height: 50px;
		top: 55px;
		left: 355px;
	}

	#writeAll #pic #text {
		position: absolute;
		height: 50px;
		width: 80px;
		text-align: center;
		line-height: 50px;
		color: #D4D4D4;
		user-select: none;
		top: 85px;
		left: 340px;
		transition: all .3s;
		font-weight: bold;
		opacity: 0;
	}

	#writeAll #pic:hover #text {
		top: 95px;
		opacity: 1;
	}

	#writeAll #title {
		height: 48px;
	}

	#writeAll #title input {
		padding: 0 10px;
		height: 48px;
		font-size: 24px;
		font-weight: bold;
		line-height: 48px;
		width: calc(100% - 20px);
		border: none;
	}

	#writeAll #title input:focus {
		outline: none;
	}

	#writeAll #title input::-webkit-input-placeholder {
		color: #D4D4D4;
	}

	#writeAll #pic,
	#writeAll #title,
	#writeAll #toolbar-container,
	#writeAll #text-container {
		margin-top: 16px;
		box-shadow: 5px 5px 5px rgba(32, 32, 32, .3);
		border-radius: 8px;
		background-color: #FFFFFF;
	}

	#writeAll #text-container {
		min-height: 360px;
	}
</style>
